/**
 * @author:linjiye
 * @date: 2024/12/30
 * @desc:
 **/

import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
import React, {useState} from 'react'
import PageTopBackBtn from "@/components/PageTopBackBtn";
import {LinearGradient} from "expo-linear-gradient";
import Animated from 'react-native-reanimated';
import FcTextInput from "@/components/FcTextInput";
import {Toast} from "@ant-design/react-native";

type Props = {
    colors?:Array<any>
    placeholder?:string
    style?:object
}

const PageSearch = ({
                        colors = ['rgba(51,77,176,1)', 'rgba(198,94,253,1)'],
                        placeholder = '请输入要搜索的内容',
                        style,
                        onSearch
                    }: Props) => {
    const [keyword, setKeyword] = useState('')
    const handleSearch = () => {
        if(!keyword) {
            Toast.info('请输入搜索内容')
            return
        }
        onSearch && onSearch(keyword)
    }
    return (
        <View style={[styles.container, style]}>
            <PageTopBackBtn/>
            <View style={{flex: 1}}>
                <FcTextInput style={{flex: 1}} type='search' text={keyword} placeholder={'请输入要搜索的内容'} onChangeText={setKeyword}
                             height={40} />
            </View>
            <TouchableOpacity onPress={() => handleSearch()} style={styles.search_btn}>
                <Text style={keyword&&styles.search_active}>搜索</Text>
            </TouchableOpacity>

        </View>
    )
}

export default PageSearch

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
        height: 44,
        width: '100%'
    },
    search_btn: {
        fontSize: 15,
        color: 'rgba(0, 0, 0, 0.3)',
        paddingRight: 16,
        paddingLeft: 6,
    },
    search_active: {
        color: '#2856FF'
    },
    close: {
        width: 16,
        height: 16,
        borderRadius: '50%',
        backgroundColor: 'black',
        justifyContent: "center",
        alignItems: "center"
    }
})